<template>
  <div class="p-4 sm:p-6 lg:p-8">
    <div class="max-w-7xl mx-auto">
      <!-- 页面标题 -->
      <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">🧰 工具箱</h1>
        <p class="mt-2 text-gray-600">在线实用工具集合，提供各种便捷功能</p>
      </div>

      <!-- 搜索和过滤区域 -->
      <div class="mb-8 flex flex-col sm:flex-row gap-4">
        <a-input-search
          v-model:value="searchText"
          placeholder="搜索工具..."
          class="sm:w-64"
          @search="onSearch"
        />
        <a-select
          v-model:value="selectedCategory"
          placeholder="选择分类"
          class="sm:w-48"
          @change="onCategoryChange"
        >
          <a-select-option value="">全部分类</a-select-option>
          <a-select-option v-for="(category, key) in categories" :key="key" :value="key">
            {{ category.name }}
          </a-select-option>
        </a-select>
      </div>

      <!-- 工具分类展示 -->
      <div class="space-y-8">
        <div v-for="(category, key) in filteredCategories" :key="key" class="bg-white rounded-lg shadow-sm p-6">
          <h2 class="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
            <component :is="category.icon" class="text-primary-500" />
            {{ category.name }}
          </h2>
          
          <!-- 工具网格 -->
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            <router-link
              v-for="tool in category.tools"
              :key="tool.path"
              :to="`/toolbox/${tool.path}`"
              class="group relative bg-white border border-gray-200 rounded-lg p-4 hover:border-primary-500 hover:shadow-md transition-all duration-300"
            >
              <!-- 工具图标 -->
              <div class="mb-4 flex justify-center">
                <img 
                  :src="tool.meta?.image" 
                  :alt="tool.name"
                  class="w-16 h-16 object-contain group-hover:scale-110 transition-transform duration-300"
                />
              </div>
              
              <!-- 工具信息 -->
              <div class="text-center">
                <h3 class="text-lg font-medium text-gray-900 group-hover:text-primary-500">
                  {{ tool.name }}
                </h3>
                <p class="mt-2 text-sm text-gray-500">
                  {{ tool.meta?.description }}
                </p>
              </div>

              <!-- 悬停效果 -->
              <div class="absolute inset-0 border-2 border-primary-500 rounded-lg opacity-0  transition-opacity duration-300" />
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { categories } from './routes'
import type { RouteRecordRaw } from 'vue-router'

interface ToolMeta {
  icon: string
  description: string
  image: string
  defaultIcon: string
}

interface ToolRoute {
  name: string
  path: string
  meta: ToolMeta
  component: () => Promise<any>
}

interface Category {
  name: string
  icon: string
  tools: ToolRoute[]
}

interface Categories {
  [key: string]: Category
}

const searchText = ref('')
const selectedCategory = ref('')

// 根据搜索和分类过滤工具
const filteredCategories = computed(() => {
  const result: Categories = JSON.parse(JSON.stringify(categories))
  
  // 如果选择了分类
  if (selectedCategory.value) {
    const key = selectedCategory.value
    return key in categories ? {
      [key]: categories[key as keyof typeof categories]
    } : {}
  }
  
  // 如果有搜索文本
  if (searchText.value) {
    const searchLower = searchText.value.toLowerCase()
    
    // 过滤每个分类中的工具
    Object.keys(result).forEach(key => {
      const category = result[key]
      if (category) {
        category.tools = category.tools.filter(tool => 
          tool.name.toLowerCase().includes(searchLower) ||
          tool.meta.description.toLowerCase().includes(searchLower)
        )
        
        // 如果分类中没有匹配的工具，删除该分类
        if (category.tools.length === 0) {
          delete result[key]
        }
      }
    })
  }
  
  return result
})

const onSearch = (value: string) => {
  searchText.value = value
}

const onCategoryChange = (value: string) => {
  selectedCategory.value = value
}
</script>

<style scoped>
.text-primary-500 {
  color: #1890ff;
}

.border-primary-500 {
  border-color: #1890ff;
}

.hover\:text-primary-500:hover {
  color: #1890ff;
}

.hover\:border-primary-500:hover {
  border-color: #1890ff;
}
</style> 